<template>
  <div class="world">
    <div class="world-item">
      <el-upload
          class="upload-demo"
          drag
          accept=".docx"
          action="https://contedu.hnzyfy.com/api/files/upload"
          :on-success="uploadfilesuccess"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip" style="text-align: center; font-weight: 800;font-size: 20px;color:red;">只能上传word文件(名称必须为：进修通知.docx)</div>
      </el-upload>
      <div class="docWrap">
        <!-- 预览文件的地方（用于渲染） -->
        <div class="files-box" ref="files1"></div>
      </div>
    </div>
    <div class="world-item">
      <el-upload
          class="upload-demo"
          drag
          accept=".docx"
          action="https://contedu.hnzyfy.com/api/files/upload"
          :on-success="uploadfilesuccess"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip" style="text-align: center; font-weight: 800;font-size: 20px;color:red;">只能上传word文件(名称必须为：录取通知.docx)</div>
      </el-upload>
      <div class="docWrap">
        <!-- 预览文件的地方（用于渲染） -->
        <div class="files-box" ref="files2"></div>
      </div>
    </div>
    <div class="world-item" style="align-self: flex-start; flex: 0.5">
      <el-upload
          class="upload-demo"
          drag
          accept=".zip"
          action="https://contedu.hnzyfy.com/api/files/upload"
          :on-success="uploadfilesuccess"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip" style="text-align: center;font-weight: 800;font-size: 20px; color:red;">只能上传zip文件</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
import {GetFile,GetByIdFile} from "@/request/utils/file";
import {renderAsync} from 'docx-preview'

let docx = require("docx-preview");
export default {
  name: "world",
  data() {
    return {}
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goPreview() {
      GetByIdFile("1").then(res=>{
        renderAsync(res, this.$refs.files1); // 渲染到页面
      })
      GetByIdFile("2").then(res=>{
        renderAsync(res, this.$refs.files2); // 渲染到页面
      })
    },

    uploadfilesuccess(response, file, fileList){
      this.goPreview()
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.goPreview();
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {
  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.world {
  width: 100%;
  height: 100%;
  //overflow-x: auto;
  display: flex;
  .world-item{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
  }
}
.docWrap{
  width: 100%;
  overflow-x: auto;
  .files-box{
    height: 70vh;
  }
}



</style>